import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:grint/constant/colors.dart';
import 'package:grint/constant/icon_font.dart';
import 'package:grint/widget/my_text.dart';
import 'package:grint/widget/black_button.dart';

class ChallengePage extends StatefulWidget {
  const ChallengePage({super.key});

  @override
  State<ChallengePage> createState() => _ChallengePageState();
}

class _ChallengePageState extends State<ChallengePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.lightBlue,
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/images/commonBg.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          child: Column(
            children: [
              _buildAppBar(),

              Expanded(
                child: SingleChildScrollView(
                  padding: EdgeInsets.symmetric(horizontal: 20.w),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(height: 20.h),

                      _buildTaskHeader(),

                      SizedBox(height: 16.h),

                      _buildTaskDescription(),

                      SizedBox(height: 24.h),

                      _buildChallengeGrid(),

                      SizedBox(height: 20.h),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildAppBar() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
      child: Row(
        children: [
          BlackButton(
            icon: IconFontIcons.iconArrowLeft,
            onTap: () => context.pop(),
          ),
          Expanded(
            child: Center(
              child: MyText(
                text: 'Challenge',
                type: TextType.miSans,
                fontSize: 24.sp,
                color: AppColors.black,
                fontWeight: FontWeight.w900,
              ),
            ),
          ),
          SizedBox(width: 26.w),
        ],
      ),
    );
  }

  Widget _buildTaskHeader() {
    return Container(
      padding: EdgeInsets.all(20.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20.r),
        border: Border.all(color: AppColors.border, width: 3),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MyText(
            text: 'Challenge Task',
            type: TextType.miSans,
            fontSize: 20.sp,
            color: AppColors.black,
            fontWeight: FontWeight.w800,
          ),
          SizedBox(height: 8.h),
          MyText(
            text: 'Take A Photo And Check In',
            type: TextType.miSans,
            fontSize: 16.sp,
            color: AppColors.textGrey,
            fontWeight: FontWeight.w600,
          ),
        ],
      ),
    );
  }

  Widget _buildTaskDescription() {
    return Container(
      padding: EdgeInsets.all(20.w),
      decoration: BoxDecoration(
        color: AppColors.blue.withValues(alpha: 0.3),
        borderRadius: BorderRadius.circular(20.r),
        border: Border.all(color: AppColors.border, width: 3),
      ),
      child: Row(
        children: [
          Icon(Icons.info_outline, color: AppColors.icon, size: 20.sp),
          SizedBox(width: 12.w),
          Expanded(
            child: MyText(
              text:
                  'Participate In Different Challenge Tasks Every Day And Develop Good Health Habits',
              type: TextType.miSans,
              fontSize: 14.sp,
              color: AppColors.black,
              fontWeight: FontWeight.w600,
              maxLines: 2,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildChallengeGrid() {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              child: _buildChallengeCard(
                title: 'Brush Teeth\nEvery Day',
                imagePath: 'assets/images/teeth-cleaning.png',
                onTap: () {},
              ),
            ),
            SizedBox(width: 16.w),
            Expanded(
              child: _buildChallengeCard(
                title: 'Daily Dental\nFloss',
                imagePath: 'assets/images/dental-health.png',
                onTap: () {},
              ),
            ),
          ],
        ),

        SizedBox(height: 16.h),

        Row(
          children: [
            Expanded(
              child: _buildChallengeCard(
                title: 'Food\nCheck-In',
                imagePath: 'assets/images/diet-guide.png',
                onTap: () {},
              ),
            ),
            SizedBox(width: 16.w),
            Expanded(child: _buildPlaceholderCard()),
          ],
        ),
      ],
    );
  }

  Widget _buildChallengeCard({
    required String title,
    required String imagePath,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: 180.h,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20.r),
          border: Border.all(color: AppColors.border, width: 3),
        ),
        child: Column(
          children: [
            Expanded(
              flex: 3,
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(17.r),
                    topRight: Radius.circular(17.r),
                  ),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(17.r),
                    topRight: Radius.circular(17.r),
                  ),
                  child: Image.asset(imagePath, fit: BoxFit.cover),
                ),
              ),
            ),

            Expanded(
              flex: 2,
              child: Container(
                width: double.infinity,
                padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
                decoration: BoxDecoration(
                  color: AppColors.blue,
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(17.r),
                    bottomRight: Radius.circular(17.r),
                  ),
                ),
                child: Row(
                  children: [
                    Expanded(
                      child: MyText(
                        text: title,
                        type: TextType.miSans,
                        fontSize: 14.sp,
                        color: AppColors.black,
                        fontWeight: FontWeight.w800,
                        maxLines: 2,
                        textAlign: TextAlign.left,
                      ),
                    ),
                    Container(
                      width: 32.w,
                      height: 32.w,
                      decoration: BoxDecoration(
                        color: AppColors.black,
                        borderRadius: BorderRadius.circular(8.r),
                      ),
                      child: Center(
                        child: MyText(
                          text: 'Go',
                          type: TextType.miSans,
                          fontSize: 12.sp,
                          color: Colors.white,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPlaceholderCard() {
    return Container(
      height: 180.h,
      decoration: BoxDecoration(
        color: Colors.white.withValues(alpha: 0.5),
        borderRadius: BorderRadius.circular(20.r),
        border: Border.all(
          color: AppColors.border.withValues(alpha: 0.5),
          width: 3,
        ),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.add_circle_outline,
              size: 40.sp,
              color: AppColors.textGrey.withValues(alpha: 0.5),
            ),
            SizedBox(height: 8.h),
            MyText(
              text: 'Stay Tuned',
              type: TextType.miSans,
              fontSize: 14.sp,
              color: AppColors.textGrey.withValues(alpha: 0.7),
              fontWeight: FontWeight.w600,
            ),
          ],
        ),
      ),
    );
  }
}
